<template>
	<view class="wrap">
		<view style="padding: 0 32rpx 12rpx;">
			<u-search v-model="params.parameter" placeholder="司机姓名或电话号码" shape="square" actionText="搜索" :animation="true" @custom="search" @search="search">
			</u-search>
		</view>
		<view class="body">
			<view class="title">
				<view class="text">选择关联{{text}}</view>
			</view>
			<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrolltolower">
				<view class="content">
					<u-radio-group v-model="checkboxValue" @change="groupChange" :borderBottom="true" placement="column"
						iconPlacement="right" size="16" activeColor="#00468C">
						<u-radio labelSize="15" labelColor="#333"
							v-for="(item, index) in checkboxList" :key="index" :label="label(item)" :name="item.driver_id">
						</u-radio>
					</u-radio-group>
				
					<view class="tips">
						<u-loadmore v-if="checkboxList.length" :line="true" :status="status" :loading-text="loadingText"
							:nomore-text="nomoreText" />
					</view>
					<view class="empty" v-if="!checkboxList.length">没有查询到可关联的司机哦！</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer">
			<view class="disable" v-if="!checkboxValue">确定</view>
			<view class="submit" @click="showModal = true" v-else>确定</view>
		</view>

		<u-modal :show="showModal" content='确定要添加勾选的司机？' :closeOnClickOverlay="true" @confirm="confirm"
			@cancel="showModal = false" @close="showModal = false" :showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	import {
		getDriverPage,
		updateVehicle
	} from '@/config/api/app.js'
	export default {
		data() {
			return {
				showModal: false,
				text: '',
				type: null,
				checkboxValue: null,
				checkboxList: [],

				params: {
					pageNum: 1,
					pageSize: 20,
					parameter: ''
				},
				pages: '',

				status: 'loadmore',
				loadingText: '努力加载中',
				nomoreText: '没有更多了！',
				loading: true,
				mainInfo:{},//主司机的信息
				driverVehicle: [],
				newDriverArr: [],//处理过的数据
				vehicleId:'',//司机企业绑定的id
				
				maxInfo:{}, //主司机的信息
				vehicleId: '',
				driver_id1: '',
				driver_id2: '',
				driver_vehicle_id1: '',
				driver_vehicle_id2: ''
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			console.log(data)
			this.driverVehicle = data.info
			this.newDriverArr = []
			this.driverVehicle.forEach(item => {
				let data = {
					"driverId": item.driverId, //司机id（清空司机关联的时候传null
					"driverVehicleId": item.driver_vehicle_id, //司机车辆关联id（新增关联时传null
					"isDefault": item.isDefault //主副司机 0副 1主
				}
				this.newDriverArr.push(data)
			})
			this.vehicleId = data.vehicleId
			if (this.driverVehicle.length) {
				let mainInfo = this.driverVehicle.find(item => {
					return item.isDefault == 1
				})
				this.mainInfo = mainInfo
				let copilotInfo = this.driverVehicle.find(item => {
					return item.isDefault == 0
				})
				if (mainInfo) {
					this.driver_id1 = mainInfo.driverId
					this.driver_vehicle_id1 = mainInfo.driver_vehicle_id
				}
				if (copilotInfo) {
					this.driver_id2 = copilotInfo.driverId
					this.driver_vehicle_id2 = copilotInfo.driver_vehicle_id
				}
			}
			this.vehicleId = data.vehicleId
			this.type = data.type
			this.text = data.type === 1 ? '主驾驶员' : '副驾驶员'
			uni.setNavigationBarTitle({
				title: `关联${this.text}`
			})
			this.getList()
		},
		methods: {
			label(item) {
				return `${item.driver_name} | ${item.mobile}`
			},
			//	获取列表
			getList() {
				getDriverPage({
					params: this.params,
					custom: {
						title: '获取司机列表……'
					}
				}).then((res) => {
					if (res.code == 0) {
						this.loading = false
						this.status = 'loading'
						let list
						if (!this.driverVehicle.length) {
							list = res.data.list
						} else {
							list = res.data.list.filter(item => {
								return !this.driverVehicle.find(prop => {
									return item.driver_id == prop.driverId
								})
							})
						}
						// console.log(list)
						// console.log(this.driverVehicle)
						this.params.pageNum == 1 ? this.checkboxList = list : this.checkboxList.push(...list)
						this.pages = res.data.pages
						if (this.pages == this.params.pageNum || this.pages == 0) this.status = 'nomore'
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			scrolltolower() {
				this.params.pageNum += 1
				if (this.params.pageNum > this.pages) {
					this.status = 'nomore'
					return
				}
				uni.$u.throttle(this.getList(), 3000)
			},
			//	提交修改
			confirm() {
				// let params = {
				// 	vehicle_id: this.vehicleId,
				// 	driver_id1: this.driver_id1,
				// 	driver_id2: this.driver_id2,
				// 	driver_vehicle_id1: this.driver_vehicle_id1,
				// 	driver_vehicle_id2: this.driver_vehicle_id2
				// }
				
				// if (this.type === 1) params.driver_id1 = this.checkboxValue
				// if (this.type === 2) params.driver_id2 = this.checkboxValue
				if(this.type === 1){
					console.log(this.checkboxValue)
					this.maxInfo.driverId = this.checkboxValue
					let max = this.newDriverArr.find(item => {
						return item.isDefault == 1
					})
					if(max){
						this.newDriverArr.forEach(item => {
							if(item.isDefault == 1){
								item.driverId = this.checkboxValue
							}
						})
					}else{
						let data = {
							driverId: this.checkboxValue,
							driverVehicleId:null,
							isDefault: 1
						}
						this.newDriverArr.push(data)
					}
					
					
				}else{
					let data = {
						driverId: this.checkboxValue,
						driverVehicleId:null,
						isDefault: 0
					}
					this.newDriverArr.unshift(data)
				}
				let params = {
					vehicleId: this.vehicleId,
					driverAanVO: this.newDriverArr
				}
				// return false
				updateVehicle(
					params
				).then((res) => {
					this.showModal = false
					if (res.code == 0) {
						uni.$u.toast('关联司机成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 600)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			back() {
				uni.navigateBack()
			},
			search(e) {
				console.log(e)
				this.params.parameter = uni.$u.trim(e)
				this.params.pageNum = 1
				this.checkboxValue = ''
				this.getList()
			},
			groupChange(e) {
				console.log(e)
				this.checkboxValue = e
			},
		}
	}
</script>

<style lang="scss">
	.u-radio{
		padding: 28rpx 0!important;
	}
	page {
		background: #fff;
	}

	.u-border-bottom {
		border-bottom: 1rpx solid #F5F7FB;

		&:last-child {
			border-bottom: none;
		}
	}
	.tips{
		margin-top: 32rpx;
		padding-bottom: 24rpx;
	}
	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 0 calc(90rpx + env(safe-area-inset-bottom));
	}

	.body {
		width: 100wh;
		height: 100%;
		overflow: auto;
		background: #FAFAFA;
		.scroll-box{
			box-sizing: border-box;
			width: 100%;
			height: calc(100% - 108rpx);
			padding-bottom: 80rpx;
		}
		.content {
			padding: 0 32rpx 12rpx;
			background: #fff;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			.empty {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #9E9E9E;
				line-height: 66rpx;
				padding: 150rpx 0;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx 12rpx 0;
			margin-top: 24rpx;
			background: #fff;

			.all {
				width: 110rpx;
			}

			.text {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				position: relative;
				padding-left: 32rpx;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 10rpx;
					width: 8rpx;
					height: 32rpx;
					background: #003E81;
				}
			}
		}
	}

	.footer {
		position: absolute;
		left: 0;
		bottom: calc(10rpx + env(safe-area-inset-bottom));
		width: 100vw;
		padding: 0 32rpx;
		box-sizing: border-box;

		.submit {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}

		.disable {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: #DCDCDC;
		}
	}
</style>
